<template>
    <div class="content">
        <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark" style="text-align: center;">校园跑腿管理系统</div></el-col>
        </el-row>
        <el-alert
                :title="user.school.name + '- - -任务平台共' + tasks.length + '个任务'"
                :closable="false"
                type="info">
        </el-alert>
        <div class="title">
            <div class="title_left">
                <h2>{{tasks.length}}</h2>
                <p>任务总数</p>
            </div>
            <div class="title_center">
                <h2>{{TaskData.publishedCnt}}</h2>
                <p>发布任务总数</p>
            </div>
            <div class="title_right">
                <h2>{{TaskData.completedCnt}}</h2>
                <p>完成任务总数</p>
            </div>
        </div>
            <div class="mychart" ref="myChart" id = "myChart"></div>
    </div>
</template>
  

<script>
    import {mapMutations, mapState} from "vuex";
    import * as echarts from "echarts";
    export default {
        mounted(){
        },
        name: "Index",
        data() {
            return {
                tasks: [],
                TaskData:{}
            }
        },
        methods: {
        },
        computed: {
            ...mapState('user', ['user']),  
        },
        async created() {
            this.$get("/task", {id: this.user.id})
                .then((res) => {      
                    this.tasks = res.data.task
            });
            const res = await this.$get("/task/taskData", {id: this.user.id})
            this.TaskData=res.data;
            
            //echarts图表
            let myEchart = echarts.init(this.$refs.myChart)
            let option = {
                title: {
                    text: '年度任务统计',
                    left: "center"
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月', '12月']
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend:{
                    right: "10%",
                    padding:35
                },
                series: [
                    {
                        name: '任务发布数',
                        type: 'line',
                        data: this.TaskData.publishedData
                    },
                    {
                        name: '任务完成数',
                        type: 'line',
                        data: this.TaskData.completedData
                    }
                ]
            };
            myEchart.setOption(option)
        }
    }
</script>

<style scoped lang="less">
    .mychart{
        width: 700px;
        height: 380px;
        margin:0 auto;
        margin-top: 50px;
        // background-color: rgb(82, 17, 188);
    }
    .el-row {
        margin-bottom: 20px;
        &:last-child {
        margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }

      .bg-purple {
    background: #d3dce6;
  }

    .content {
        background: #FFf;
        margin: 0 15px;
        padding: 15px;

        .card h2 {
            font-weight: normal;
            font-size: 18px;

            span {
                font-size: 12px;
                display: inline-block;
                border: 1px solid red;
                padding: 1px 3px;
            }
        }

        .title {
            margin: 15px 0;
            width: 100%;
            display: flex;
            height: 100px;
            justify-content: space-between;

            div {
                border-radius: 5px;
                padding: 15px;
                color: #fff;
            }

            div p {
                font-size: 12px;
                margin-top: 10px;
            }

            .title_left {
                width: 32.5%;
                background: #f39303;
            }

            .title_center {
                width: 32.5%;
                background: #0a02ec;
            }

            .title_right {
                width: 32.5%;
                background: #11b95c;
            }
        }

    }

</style>